<template>
	<div class="myPage" style="overflow: hidden;">
		
		<div style="filter: blur(80rpx);">
			<div style="position: absolute;width: 100%;height: 100%;background-color: white;-webkit-filter:blur(87rpx);z-index: 1;">
				<div style="position: absolute;width: 380rpx;height: 380rpx;background-color: lightgreen;border-radius: 50%;right: -8%;top: -14%;">
					
				</div>
				<div style="position: absolute;width: 520rpx;height: 520rpx;background-color: deepskyblue;border-radius: 50%;left:-24%;top: -14%;">
					
				</div>
			</div>
		</div>
		
		<fui-nav-bar style="z-index: 2;" fontWeight="bold"  background="transparent" color="#000"  title="云体中考体测系统" ></fui-nav-bar>
		<div class="container" style="flex: 1;z-index: 2;overflow-y: scroll;">
			
			
			
			<div class="main_pic">
				<div  @click="gotoOverview()" class="main_font">
					<div class="c1">
						<span class="appear appear-1 hc-main">
							<span class="highlight hc-1 d-1">中学体考体测</span>
						</span>
						<br />
						<span class="appear appear-2 hc-main">
							<span class="highlight hc-2 d-2 titl_2">管理中学生体考、体测成绩></span>
						</span>
					</div>
				</div>
				<image
					style="width: 440rpx;height: 400rpx;right: -18%;position: absolute;top: -10%;border-radius: 32rpx;"
					src="/static/image/pic1.png" />
			</div>

			<div class="shadowback"
				style="background: white;margin-top: 48rpx;margin-left: 32rpx;margin-right: 32rpx;border-radius: 32rpx;margin-bottom: 32rpx;padding: 16rpx 32rpx;justify-content: space-around;">
				<fui-horizontal-scroll background="rgba(255, 43, 43, .08)" scrollBarColor="#FF2B2B">
					<view class="fui-list">
						<div @click="gotoPage(item.link)" v-for="(item,index) in menuList"
							style="display: flex;flex-direction: column;width: 160rpx;align-items: center;justify-content: space-evenly;">
							<image style="width: 120rpx;height: 120rpx;" :src="item.iconSrc">
							</image>
							<span style="font-size: 26rpx;">{{item.text}}</span>
						</div>
					</view>
				</fui-horizontal-scroll>
			</div>

			

			
			<div>
				<div v-if="false" style="margin-left: 32rpx;margin-right: 32rpx;display: flex;margin-top: 40rpx;">
					<div
						style="background-color: orange;height: 40rpx;width: 12rpx;border-radius: 16rpx;margin-right: 16rpx;">
					</div>
					
				</div>
				<div class="shadowback "
					style="background: azure;height: 200rpx;margin-top: 24rpx;margin-left: 32rpx;margin-right: 32rpx;border-radius: 16rpx;margin-bottom: 32rpx;display: flex;flex-direction: row;padding: 32rpx 32rpx;box-sizing: border-box;position: relative;overflow: hidden;justify-content: space-between;align-items: center;">
					<div style="display: flex;flex-direction: column;justify-content: space-around;z-index: 1;">
						<span style="font-size: 32rpx;">成绩查询</span>
						<span style="color: gray;font-size: 28rpx;">查询考生的成绩</span>
					</div>
				
					<image style="width: 110rpx;height: 110rpx;" src="/static/icon/icon_书架.png">
					</image>
				
					<div
						style="position: absolute;width: 900rpx;height: 600rpx;background: white;bottom: -10%;left: -50%;z-index: 0;border-radius: 999rpx;">
					</div>
				
				</div>
				
				
				<div @click="gotoPage('/pages/scoreRule/scoreRule')" class="shadowback "
					style="background: #fdffe2;height: 200rpx;margin-top: 16rpx;margin-left: 32rpx;margin-right: 32rpx;border-radius: 16rpx;margin-bottom: 32rpx;display: flex;flex-direction: row;padding: 32rpx 32rpx;box-sizing: border-box;position: relative;overflow: hidden;justify-content: space-between;align-items: center;">
					<div style="display: flex;flex-direction: column;justify-content: space-around;z-index: 1;">
						<span style="font-size: 32rpx;">规则查询</span>
						<span style="color: gray;font-size: 28rpx;">查询评分规则</span>
					</div>
				
					<image style="width: 100rpx;height: 100rpx;" src="/static/icon/规则.png">
					</image>
				
					<div
						style="position: absolute;width: 900rpx;height: 600rpx;background: white;bottom: -10%;left: -50%;z-index: 0;border-radius: 999rpx;">
					</div>
				
				</div>
			</div>

		</div>
		<U-TabBar :current="0"></U-TabBar>
	</div>



</template>

<script>
	// import Tabbar from '@/components/tabbar.vue'
	import store from '/store/index.js'
	export default {
		components: {
			// Tabbar
		},
		data(){
			
			return{
				menuList:[{
					link:'/pages/studentManage/studentManage',
					iconSrc:'/static/icon/biaoqian.png',
					text:'学生管理'
				},{
					link:'/pages/classManage/classManage',
					iconSrc:'/static/icon/运行管理.png',
					text:'班级管理'
				},
				{
					iconSrc:'/static/icon/调拨调剂.png',
					link:'/pages/examManage/examManage',
					text:'中考体育'
				},
				{
					iconSrc:'/static/icon/设备交接.png',
					link:'/pages/optionManage/optionManage',
					text:'选科管理'
				},
				{
					iconSrc:'/static/icon/基础资料.png',
					text:'体质健康'
				},{
					iconSrc:'/static/icon/设备交接.png',
					text:'免考管理'
				},
				],
			}
		},
		onShow() {
			// uni.hideTabBar({
			// 	animation: false
			// })
			console.log(store);
		},
		methods:{
			gotoPage(link){
				console.log(link);
				uni.navigateTo({
					url:link
				});
			},
			gotoOverview(){
				console.log("gotoOverview");
				uni.navigateTo({
					url:'/pages/overview/overview'
				})
			},
			gotoDeviceManage(){
				console.log("gotoDeviceManage");
				uni.navigateTo({
					url:'/pages/deviceManage/deviceManage'
				})
			}
		}
		
	}
</script>

<style scoped>
	.main_font {
		top: 20%;
		position: absolute;
		left: -18%;
		z-index: 1;
		background-color: transparent;
	}

	.main_pic {
		margin-top: 80rpx;
		margin-left: 120rpx;
		margin-right: 120rpx;
		position: relative;
		height: 360rpx;
		border-radius: 20px;
		background-color: rgb(246 246 246);
	}

	/* 动态字体*/
	.appear-1,
	.appear-1:after {
		animation-delay: 0.1s;
	}

	.appear-2,
	.appear-2:after {
		animation-delay: 0.2s;
	}

	.appear {
		position: relative;
		animation-name: appear-text;
		animation-duration: 0.9s;
		animation-fill-mode: both;
		animation-iteration-count: 1;
		animation-play-state: running;
		animation-timing-function: ease-out;
	}

	.appear:after {
		content: "";
		width: 100%;
		height: 100%;
		position: absolute;
		display: inline;
		left: 0;
		top: 0;
		border-radius: 0.1em;
		z-index: 1;
		animation-name: appear-block;
		animation-duration: 0.9s;
		animation-fill-mode: both;
		animation-iteration-count: 1;
		animation-play-state: running;
		animation-timing-function: ease-out;
	}

	.hc-main:after {
		background-color: #a797ff;
	}

	.hc-orange:after {
		background-color: #fff263;
	}

	.c1 {
		text-align: left;
		color: rgb(75, 75, 75);
		font-weight: bold;
		font-size: 64rpx;
		font-family: Montserrat, sans-serif;
	}

	.c1 .titl_2 {
		padding-left: 10px;
		padding-top: 15px;
		display: flex;
		letter-spacing: 15px;
		font-weight: normal;
		font-size: 32rpx;
		font-family: Montserrat, sans-serif;
	}

	.p1 {
		padding-left: 20px;
		padding-top: 12px;
		display: flex;
		font-weight: 100;
		text-align: left;
		letter-spacing: 18px;
		font-family: Montserrat, sans-serif;
	}


	.appear {
		position: relative;
	}

	.highlight:after {
		content: "";
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		border-radius: 0.1em;
		z-index: -1;
		animation-name: highlight;
		animation-duration: 7s;
		animation-fill-mode: both;
		animation-iteration-count: infinite;
		animation-play-state: running;
		animation-timing-function: linear;
	}

	.hc-1::after {
		background-color: #c7ffd1;
	}

	.hc-2::after {
		background-color: #fcffbb;
	}

	.d-1:after {
		animation-delay: 2s;
	}

	.d-2:after {
		animation-delay: 4s;
	}

	@keyframes highlight {
		0% {
			transform: translateX(-55%) scaleX(0);
		}

		3% {
			transform: translateX(-10%) scaleX(0.5);
		}

		5% {
			transform: translateX(10%) scaleX(0.5);
		}

		6% {
			transform: translateX(20%) scaleX(0.5);
		}

		10% {
			transform: translateX(55%) scaleX(0);
		}

		to {
			transform: translateX(55%) scaleX(0);
		}
	}

	@keyframes appear-text {
		0% {
			color: transparent;
		}

		50% {
			color: transparent;
			/* 设置透明 */
		}

		50.01% {
			color: unset;
			/* 清除 */
		}

		to {
			color: unset;
		}
	}

	@keyframes appear-block {
		0% {
			transform: translateX(-50%) scaleX(0);
		}

		40% {
			transform: translateX(0%) scaleX(1);
		}

		60% {
			transform: translateX(0%) scaleX(1);
		}

		to {
			transform: translateX(50%) scaleX(0);
		}
	}

	/***************** container 2**********************/
	hr {
		position: absolute;
		top: 20px;
		left: 120px;
		width: 1000px;
		background-color: rgb(192, 192, 192);
		border: 2px rgb(192, 192, 192) solid;
	}

	.hr_div {
		position: relative;
	}

	.hr_font {
		position: absolute;
		left: 480px;
		width: 280px;
		height: 80px;
		font-size: 1.2em;
		background-color: #fff;
		z-index: 1;
	}

	.hr_font span,
	.erWeiMa span {
		font-weight: bold;
		color: rgb(77, 77, 77);
	}

	.erWeiMa span {
		line-height: 60px;
	}

	.erWeiMa {
		position: relative;
		top: 150px;
		height: 400px;
	}

	.erWeiMa img {
		width: 300px;
		height: auto;
	}

	/***************** container 3 **********************/

	/***************** container 4 footer **********************/
	.center {
		/* 宽度要根据自定义好的宽度写 */
		width: 1200px;
		/* 居中 */
		margin: 0 auto;
	}

	#footer {
		padding: 0px;
		box-sizing: border-box;
		flex-shrink: 0;
	}

	/* 模块基础设置 */
	.foot_top>.center,
	.foot_middle>.center {
		display: flex;
		flex-wrap: wrap;
		/* 项目两端对齐 */
		justify-content: space-between;
		align-content: space-between;
	}

	/****板块初始化*****/
	/* .foot_top .center > :nth-child(1) {
  width: 500px;
  height: 60px;
}

.foot_top .center > :nth-child(2) {
  width: 500px;
  height: 60px;
} */

	.foot_top {
		background-color: white;
	}

	.foot_middle {
		background-color: rgb(65, 65, 65);
	}

	/****板块初始化 END*/

	/*****模块布局******/
	/*订阅 和推送*/
	.f_push,
	.f_push2 {
		text-align: center;
	}

	.f_push,
	.f_push2,
	.f_logo>a {
		color: rgb(67, 76, 105);
		position: relative;
		line-height: 60px;
		font-weight: bold;
	}

	/* ******圆圈元素******/
	.l_tag {
		width: 50px;
		height: 50px;
		border-radius: 50%;
		display: inline-block;
		vertical-align: middle;
	}

	.l_tag2 {
		margin-top: 10px;
		display: inline-block;
		vertical-align: bottom;
	}

	.l_tag2 img {
		width: 22px;
		height: auto;
	}

	.tag {
		width: 25px;
		height: 25px;
		margin: 10px auto;
		position: relative;
		background-size: cover;
		background-repeat: no-repeat;
	}

	/************* logo 定位 *************/
	.f_logo {
		line-height: 260px;
		margin-left: 5px;
	}

	.f_logo img {
		width: 180px;
		height: auto;
	}

	/***** 联系方式定位及字体样式 ********/
	.f_cards {
		text-align: left;
		margin-top: 70px;
		color: rgb(220, 245, 255);
		font-weight: bold;
	}

	.f_cards2 {
		margin-top: 70px;
		color: rgb(220, 245, 255);
		font-weight: bold;
	}

	.f_cards a {
		padding-left: 10px;
		text-decoration: none;
		font-size: 15px;
		/* color: #ffbb4e; */
		color: #ffffff;
		font-weight: bold;
	}

	/******** 联系方式定位及字体样式  END *********/

	/****模块布局 END****/

	/*  **素材图*********/
	.f_push>a>.l_tag>.tag {
		transition: 0.5s;
		background-image: url("../assets/右箭头.png");
	}

	.wx {
		transition: 0.5s;
		background-image: url("../assets/微博.png");
	}

	.wb {
		transition: 0.5s;
		background-image: url("../assets/微信.png");
	}

	.qq {
		transition: 0.5s;
		background-image: url("../assets/qq1.png");
	}

	.f_cards>div :nth-child(3) {
		background-image: url("../assets/e-mail.png");
	}

	.f_cards>div :nth-child(6) {
		background-position: center;
		background-repeat: no-repeat;
		background-image: url("../assets/电话.png");
	}

	.f_ewma {
		/*二维码 */
		margin: 20px auto;
		width: 50px;
		height: 50px;
		background-color: #fff;
		background-image: url("../assets/二维码2.png");
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		transition: 0.8s;
	}

	/*  ************素材图hover效果****************/

	.tag:hover {
		/* 关注图标 */
		transition: 0.5s;
		transform: scale(1.5);
	}

	.f_cards a:hover {
		/* 邮箱电话 */
		color: rgb(255, 245, 195);
	}

	.f_ewma:hover {
		margin: 40px auto;
		/* 二维码 */
		transform: scale(2);
		transition: 0.8s;
		background-image: url("../assets/二维码.png");
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
	}

	/*************xiaomage************/
	#bd {
		position: relative;
	}

	#phone {
		position: absolute;
		left: -200px;
		top: 180px;
	}

	.swiper {
		width: 820px;
		position: absolute;
		left: 480px;
		top: 150px;
	}

	/* .el-carousel__item:nth-child(2n) {
        background-color: #77AAAD
      }

      .el-carousel__item:nth-child(2n+1) {
        background-color: #D8E6E7;
      } */
	#xuanz {
		position: absolute;
		width: 450px;
		height: auto;
		left: 120px;
		top: 10%;
		z-index: -91;
	}

	#p-1 {
		position: absolute;
		left: 225px;
		top: 11%;
		opacity: 0.1;
	}

	#p-2 {
		position: absolute;
		left: 225px;
		top: 11%;
		opacity: 0;
	}

	#p-3 {
		position: absolute;
		left: 225px;
		top: 11%;
		opacity: 0;
	}

	#select {
		position: absolute;
		left: 310px;
		top: 520px;
		display: flex;
		justify-content: center;
	}

	.a {
		position: relative;
		display: flex;
		justify-content: center;
		width: 300px;
		left: 100px;
	}

	.c,
	.b {
		border: 4px solid #141616;
		border-radius: 20px;
		font: 700 50px "";
		line-height: 90px;
		position: absolute;
		color: #fad386;
		padding: 0px 20px;
		top: 0;
		/* 使文字上下移动时有0.4s的过渡效果 */
		transition: 0.4s;
	}

	.c {
		/* 裁剪文字的上半部分，括号里的四个值分别是
            top，right，bottom，left */
		clip-path: inset(49% 0 0 0);
	}

	.b {
		/* 裁剪文字的下半部分 */
		clip-path: inset(1% 0 50% 0);
	}

	.a:hover .b,
	.a:hover .c {
		/* 让--i为30的向上移动30px，-30的向下移动30px
            这样子就能空出60px留给中间的超链接 */
		top: calc(var(--i) * 1px);
		background-color: #f7f8f6;
	}

	.a:hover .d {
		opacity: 1;
	}

	.d {
		/* background-color: rgb(48, 214, 187); */
		text-decoration: none;
		color: rgb(0, 0, 0);
		font: 800 30px "";
		line-height: 110px;
		opacity: 0;
		transition: 0.3s;
	}
	
	.fui-list {
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	
	.fui-list--item {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		margin-right: 24rpx;
	}
	
	.fui-list--item:last-child {
		margin-right: 0;
	}
</style>